<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>预约教室信息</title>
  <style>

    /* 整体页面样式 */
    body {
      font: 13px/20px 'Roboto', sans-serif;
      color: #333;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
      background:  #f1de9e;
    }

    h1 {
      text-align: center;
      color: #d77330;
      margin-top: 30px;
      margin-bottom: 20px;
    }

    .search-container {
      text-align: center;
      margin-bottom: 20px;
    }

    #search-input {
      padding: 10px 15px;
      border: 1px solid #ccc;
      border-radius: 5px;
      outline: none;
      transition: border-color 0.3s ease;
    }

    #search-input:focus {
      border-color: #3883d8;
    }

    #search-button {
      background-color: #3883d8;
      color: #fff;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      margin-left: 10px;
      transition: background-color 0.3s ease;
    }

    #search-button:hover {
      background-color: #31bf84;
    }

    /* 表格样式 */
    table {
      width: 80%;
      border-collapse: collapse;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      background-color: #fff;
    }

    table tbody tr th {
      background: #31bf84;
      text-align: center;
      border: 1px solid #02397F;
      letter-spacing: 2px;
      text-transform: uppercase;
      font-size: 14px;
      color: #fff;
      height: 37px;
    }

    table tbody tr td {
      text-align: center;
      border: 1px solid #000000;
      font-size: 15px;
      color: #ad7878;
      height: 37px;
    }

    /* 表单容器 */
    fieldset {
            border: 1px solid #433939;
            padding: 20px;
            border-radius: 8px;
        }

        legend {
            font-size: 1.2em;
            color: #4CAF50;
            font-weight: bold;
        }

        /* 表格布局 */
        table {
            width: 100%;
            margin-top: 10px;
            border-collapse: collapse;
        }

        /* 表格单元格 */
        td {
            padding: 10px;
            vertical-align: middle;
            text-align: left;
        }

        /* 标签样式 */
        label {
            font-weight: bold;
            color: #333;
        }

        /* 输入框样式 */
        input[type="text"] {
            width: 100%;
            padding: 8px;
            margin: 5px 0;
            border: 1px solid #cccccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        input[type="submit"] {
            background-color: #4cbf0e;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            width: 100%;
            font-size: 16px;
            margin-top: 10px;
        }

        input[type="submit"]:hover {
            background-color: #45a049;
        }

        /* 响应式设计 */
        @media screen and (max-width: 600px) {
            .container {
                padding: 15px;
            }

            input[type="text"], input[type="submit"] {
                font-size: 14px;
                padding: 10px;
            }
        }
  </style>
</head>

<body>
  <script>
    // 获取模态框元素
    const modal = document.getElementById('deleteModal');
    const confirmDeleteButton = document.getElementById('confirm-delete');
    const cancelDeleteButton = document.getElementById('cancel-delete');
    const deleteLinks = document.querySelectorAll('.delete-link');
    let currentDeleteUrl = '';

    // 删除链接点击事件
    deleteLinks.forEach(link => {
      link.addEventListener('click', function (e) {
        e.preventDefault();
        currentDeleteUrl = this.getAttribute('data-id');
        modal.style.display = 'block'; // 显示模态框
      });
    });

    // 确认删除按钮点击事件
    confirmDeleteButton.addEventListener('click', function () {
      window.location.href = `/delete/${currentDeleteUrl}`; // 执行删除操作
    });

    // 取消删除按钮点击事件
    cancelDeleteButton.addEventListener('click', function () {
      modal.style.display = 'none'; // 关闭模态框
    });

    // 点击模态框外部区域关闭模态框
    window.addEventListener('click', function (e) {
      if (e.target === modal) {
        modal.style.display = 'none';
      }
    });
  </script>
    <h1>欢迎<%= username %>。查看教室预约信息</h1>
    <a href="/logout">点击这里登出</a>

  <table>
    <h1 style="text-align: center">已预约教室情况</h1>
    <a href="/insert">再次预约</a>
    <br />
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>教室</th>
      <th>预约日期</th>
      <th>删除</th>
      <th>编辑</th>
    </tr>
    <% data.forEach(function (item, index) { %>
    <tr>
      <td><%= item.id %></td>
      <td><%= item.username %></td>
      <td><%= item.classroom %></td>
      <td><%= item.date %></td>
      <td><a href="/delete/<%= encodeURIComponent(item.id) %>">删除</a></td>
      <td><a href="/edit/<%= encodeURIComponent(item.id) %>">编辑</a></td>
    </tr>
    <% }); %>
  </table>

  <h1>查询教室预约信息</h1>
  <form method="get" action="/search">
      <fieldset>
          <legend>查询条件</legend>
          <table>
              <tr>
                  <td><label>姓名</label></td>
                  <td><input type="text" name="username" /></td>
              </tr>
              <tr>
                  <td><label>教室</label></td>
                  <td><input type="text" name="classroom" /></td>
              </tr>
              <tr>
                  <td><label>预约日期</label></td>
                  <td><input type="text" name="date" /></td>
              </tr>
          </table>
          <input type="submit" value="查询" />
      </fieldset>
  </form>
</body>

</html>
